import React, {PureComponent} from "react";
import {View, Text, StyleSheet, Animated, SafeAreaView, TouchableOpacity, Image, ScrollView} from "react-native";
import {connect} from "react-redux";
import {COLORS, icons, SIZES} from "../constants";
import {RootState} from "../types";
import StickyHeader from "../components/StickyHeader";
import {restaurantListIdx, RestaurantsI, UserInfo} from "../types/TabState";
import {ptd} from "../utils/styleUtil";
import {Dispatch} from "redux";
import {TabActions} from "../modules/TabModule";

interface HomePageState {
    scrollY: Animated.Value;
    headHeight: number;
    listIdx: number;
}

interface HomePageProps {
    userInfo: UserInfo;
    restaurantsList: RestaurantsI[];
    navigation: any;
    sortRestaurants: (listIdx: restaurantListIdx) => void;
}

class HomePage extends PureComponent<HomePageProps, HomePageState> {
    state = {
        scrollY: new Animated.Value(0),
        headHeight: -1,
        listIdx: restaurantListIdx.BestSaller,
    };
    changeListIdx = (listIdx: restaurantListIdx) => {
        this.setState({listIdx});
        this.props.sortRestaurants(listIdx);
    };
    goDetail = (item: RestaurantsI) => {
        this.props.navigation.push("Detail", {restaurant: item});
    };
    componentDidMount() {
        this.props.sortRestaurants(this.state.listIdx);
    }
    render() {
        let {scrollY, listIdx} = this.state;
        let {userInfo, restaurantsList} = this.props;

        if (!userInfo) return <></>;

        return (
            <SafeAreaView style={{backgroundColor: COLORS.black, flex: 1}}>
                <Animated.ScrollView
                    onScroll={Animated.event(
                        [
                            {
                                nativeEvent: {
                                    contentOffset: {y: scrollY},
                                },
                            },
                        ],
                        {useNativeDriver: true}
                    )}
                >
                    <View
                        onLayout={e => {
                            let {height} = e.nativeEvent.layout;
                            this.setState({headHeight: height});
                        }}
                    >
                        <View style={styles.headerWra}>
                            <View>
                                <Text style={styles.headerTxt1}>Hello~</Text>
                                <Text style={styles.headerTxt2}>{userInfo.nickname}</Text>
                            </View>
                            <TouchableOpacity style={styles.addMoneyWra}>
                                <Image source={icons.addFill} style={styles.addMoneyIcon} />
                                <Text style={styles.addMoneyTxt}>$520.00</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.topBtnWra}>
                            <TouchableOpacity style={styles.topBtnItemWra}>
                                <Image source={icons.nearby} style={styles.topBtnIcon} />
                                <Text style={styles.topBtnTxt}>Nearby</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.topBtnItemWra}>
                                <Image source={icons.comments} style={styles.topBtnIcon} />
                                <Text style={styles.topBtnTxt}>Comments</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.topBtnItemWra}>
                                <Image source={icons.search} style={styles.topBtnIcon} />
                                <Text style={styles.topBtnTxt}>Search</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <StickyHeader stickyHeaderY={this.state.headHeight} stickyScrollY={this.state.scrollY}>
                        <ScrollView
                            bounces={false}
                            horizontal
                            showsHorizontalScrollIndicator={false}
                            contentContainerStyle={{
                                paddingHorizontal: SIZES.SPACE_S,
                                backgroundColor: COLORS.black,
                                paddingVertical: 10,
                            }}
                        >
                            <TouchableOpacity style={styles.listIdxWra} onPress={() => this.changeListIdx(restaurantListIdx.BestSaller)}>
                                <Text style={[styles.baseIndexTxt, listIdx === 0 && styles.actIdxTxt]}>Best Saller</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.listIdxWra} onPress={() => this.changeListIdx(restaurantListIdx.Nearby)}>
                                <Text style={[styles.baseIndexTxt, listIdx === 1 && styles.actIdxTxt]}>Nearby</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.listIdxWra} onPress={() => this.changeListIdx(restaurantListIdx.ComingSoon)}>
                                <Text style={[styles.baseIndexTxt, listIdx === 2 && styles.actIdxTxt]}>Coming Soon</Text>
                            </TouchableOpacity>
                        </ScrollView>
                    </StickyHeader>
                    <View style={styles.listWra}>
                        {restaurantsList.map((item, index) => {
                            return (
                                <TouchableOpacity key={index} style={[styles.listItemWra, index === restaurantsList.length - 1 && {marginBottom: 0}]} onPress={() => this.goDetail(item)}>
                                    <Image source={item.img} style={styles.restImg} />
                                    <View style={styles.itemRightWra}>
                                        <Text style={styles.itemTxt1}>{item.title}</Text>
                                        <Text numberOfLines={4} style={styles.itemTxt2}>
                                            {item.detail}
                                        </Text>
                                        <View
                                            style={{
                                                flexDirection: "row",
                                                alignItems: "center",
                                            }}
                                        >
                                            <View
                                                style={{
                                                    flexDirection: "row",
                                                    alignItems: "center",
                                                    marginRight: 40,
                                                }}
                                            >
                                                <Image source={icons.itemSell} style={{width: 21, height: 21}} />
                                                <Text style={styles.itemTxt3}>{item.hot}</Text>
                                            </View>
                                            <View style={{flexDirection: "row", alignItems: "center"}}>
                                                <Image source={icons.itemNearby} style={styles.itemIcon} />
                                                <Text style={styles.itemTxt3}>{item.nearby}m</Text>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            );
                        })}
                        <View style={styles.nomoreWra}>
                            <View style={styles.nomoreLine} />
                            <Text style={styles.nomoreTxt}>No More</Text>
                            <View style={styles.nomoreLine} />
                        </View>
                    </View>
                </Animated.ScrollView>
            </SafeAreaView>
        );
    }
}

const mapStateToProps = (state: RootState) => ({
    userInfo: state.app.tab.userInfo,
    restaurantsList: state.app.tab.restaurantsList,
});

const mapDispatchToProps = (dispatch: Dispatch) => ({
    sortRestaurants(listIdx: restaurantListIdx) {
        dispatch(TabActions.sortRestaurants(listIdx));
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(HomePage as any);

const styles = StyleSheet.create({
    headerWra: {
        paddingHorizontal: SIZES.SPACE_M,
        paddingVertical: SIZES.SPACE_M,
        flexDirection: "row",
        alignItems: "center",
    },
    headerTxt1: {
        color: "#fff",
        fontSize: 18,
        lineHeight: 18,
        marginBottom: 5,
    },
    headerTxt2: {
        color: "#fff",
        fontSize: 28,
        fontWeight: "bold",
    },
    addMoneyWra: {
        marginLeft: "auto",
        backgroundColor: "#FF6240",
        flexDirection: "row",
        paddingVertical: 8,
        paddingHorizontal: 15,
        borderRadius: 25,
        alignItems: "center",
    },
    addMoneyIcon: {
        width: 30,
        height: 30,
        tintColor: "#ffffff88",
    },
    addMoneyTxt: {
        color: "#fff",
        fontSize: 18,
        marginLeft: 10,
    },
    topBtnWra: {
        backgroundColor: "#212429",
        flexDirection: "row",
        marginHorizontal: SIZES.SPACE_S,
        justifyContent: "space-between",
        paddingVertical: 12,
        paddingHorizontal: 12,
        borderRadius: 10,
        marginBottom: SIZES.SPACE_S,
    },
    topBtnItemWra: {
        flexDirection: "row",
        alignItems: "center",
    },
    topBtnIcon: {
        width: 30,
        height: 30,
    },
    topBtnTxt: {
        color: "#fff",
        fontSize: 15,
        marginLeft: 5,
    },
    baseIndexTxt: {
        fontSize: 25,
        color: COLORS.lightGray4,
    },
    listIdxWra: {
        marginRight: 20,
    },
    actIdxTxt: {
        color: "#fff",
    },
    restImg: {
        width: 120,
        height: 150,
        borderRadius: 8,
    },
    listWra: {
        paddingHorizontal: SIZES.SPACE_S,
        paddingTop: 10,
    },
    nomoreWra: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 20,
    },
    nomoreLine: {
        height: StyleSheet.hairlineWidth * 3,
        backgroundColor: COLORS.gray,
        flex: 1,
    },
    nomoreTxt: {
        fontSize: 15,
        color: COLORS.lightGray4,
        marginHorizontal: 20,
    },
    listItemWra: {
        marginBottom: 25,
        flexDirection: "row",
    },
    itemTxt1: {
        color: "#fff",
        fontSize: 24,
        fontWeight: "bold",
        lineHeight: 30,
    },
    itemTxt2: {
        color: "#ffffffaa",
        width: ptd(200),
    },
    itemRightWra: {
        marginLeft: 20,
        justifyContent: "space-between",
    },
    itemIcon: {
        width: 23,
        height: 23,
    },
    itemTxt3: {
        color: "#fff",
        marginLeft: 10,
    },
});
